<script>
import time from "@/assets/js/Time.ts";
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import Play from "@/page/play/index.vue";
//引入路由
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  components: { Play },
  setup() {
    const store = useStore();
    const { proxy } = getCurrentInstance();
    //创建route
    const SongNum = ref(0);
    const router = useRouter();
    const route = useRoute();
    const obj = reactive({
      SongId: "",
      title: "专辑",
      singer: "",
      describe: "",
      Album: [],
      songs: [],
      songslength: "",
      backgroundcolor: "(255,255,255)",
    });
    const getAlbum = () => {
      proxy.$http
        .get("http://localhost:4000/album?id=" + route.query.id)
        .then((response) => {
          let videodata = response.data;
          if (typeof videodata == "string") {
            videodata = JSON.parse(videodata);
          }
          obj.Album = videodata.album;
          obj.title = obj.Album.type;
          obj.singer = obj.Album.artists[0].name;
          obj.describe = obj.Album.description;
          videodata.songs.map((i, k) => {
            obj.songs.push(i);
          });
          obj.songslength = obj.songs.length;
          obj.SongId = obj.songs[0].id;

          backgroundColor();
        });
    };
    // 全部播放
    const PlayAllClick = () => {
      obj.SongId = obj.songs[0].id;
      store.commit("songID", {
        songid: obj.SongId,
        songnum: SongNum.value,
      });
    };
    // 图片色调
    const backgroundColor = () => {
      var img_url = obj.Album.blurPicUrl;
      var img = new Image();
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        img.style.display = "none";
        var imgData = ctx.getImageData(0, 0, img.width, img.height).data;
        var b = "(" + imgData[2] + "," + imgData[1] + "," + imgData[0] + ")";
        obj.backgroundcolor = b;
      };
      img.src = img_url;
      img.crossOrigin = "anonymous";
    };
    // 获取歌曲id
    const SongsClick = (id) => {
      obj.SongId = id;
      store.commit("songID", {
        songid: obj.SongId,
        songnum: SongNum.value,
      });
      SongNum.value = 1;
    };
    // 返回上一页
    const returnClick = () => {
      router.go(-1);
    };
    const SongIdNav = (val) => {
      console.log("val", val);
    };
    onMounted(() => {
      getAlbum();
    });
    return {
      obj,
      time,
      SongNum,
      returnClick,
      SongsClick,
      SongIdNav,
      PlayAllClick,
    };
  },
};
</script>
<template>
  <div class="app">
    <van-sticky position="top">
      <div
        class="top-box"
        :style="{
          'background-color': 'rgb' + obj.backgroundcolor,
        }"
      >
        <div class="left">
          <span class="iconfont" @click="returnClick">&#xe61d;</span>
          <div class="tit">
            {{ obj.title }}
          </div>
        </div>
        <div class="right">
          <span class="iconfont">&#xe8c4;</span>
        </div>
      </div>
    </van-sticky>
    <div
      class="top"
      :style="{
        'background-color': 'rgb' + obj.backgroundcolor,
      }"
    >
      <div class="top-box-inner">
        <div class="topcon">
          <div class="img">
            <van-image width="100%" lazy-load :src="obj.Album.blurPicUrl" />
          </div>
          <div class="text">
            <div>
              <div class="name">
                {{ obj.Album.name }}
              </div>
              <div class="singer">
                歌手：{{ obj.singer }}
                <van-icon name="arrow" size="12" color="#b7b7b7" />
              </div>
            </div>
            <div>
              <div class="time">
                发布时间：{{ time.formatTime(obj.Album.publishTime / 1000) }}
              </div>
              <div class="describe">
                <div class="van-ellipsis">{{ obj.describe }}</div>
                <van-icon name="arrow" size="12" color="#b7b7b7" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 收藏、评论、分享Collect, comment, share -->
      <div class="ccs">
        <div class="collect disfxd">
          <span class="iconfont">&#xe61c;</span>
          <span>收藏</span>
        </div>
        |
        <div class="comment disfxd">
          <van-icon
            name="chat-o"
            size="12"
            color="#333"
            :style="{
              'margin-right': '5px',
            }"
          />
          <span>评论</span>
        </div>
        |
        <div class="share disfxd">
          <span class="iconfont">&#xe739;</span>
          <span>分享</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="listtop">
        <div class="listleft" @click="PlayAllClick">
          <van-icon name="play-circle" color="red" size="14" />
          <span class="name">播放全部</span>
          <span class="num">（{{ obj.songslength }}）</span>
        </div>
      </div>
      <ul>
        <li
          v-for="(item, index) in obj.songs"
          :key="index"
          @click="SongsClick(item.id)"
        >
          <div class="num">
            {{ index + 1 }}
          </div>
          <div class="text">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="tap">
              <span v-for="(itx, idx) in item.ar" :key="idx">{{
                itx.name
              }}</span>
            </div>
          </div>
          <div class="move">
            <span class="iconfont">&#xe8c4;</span>
          </div>
        </li>
      </ul>
    </div>
    <canvas id="canvas" style="display: none"></canvas>
    <!-- <div class="dixf">
      <Play :SongId="obj.SongId" @SongNew="SongIdNav" :SongNum="SongNum"></Play>
    </div> -->
  </div>
</template>

<style lang="less" scoped>
.app {
  .top-box {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    .iconfont {
      color: #fff;
      font-size: 18px;
    }
    .left {
      display: flex;
      align-items: center;
      .iconfont {
        margin-right: 15px;
      }
      .tit {
        color: #fff;
        font-size: 18px;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }

  .top {
    border-radius: 0px 0px 190px 190px / 0px 0px 5px 5px;
    position: relative;
    padding: 0 8px;
    padding-top: 20px;
    .top-box-inner {
      width: 100%;
      height: 180px;
      margin: 0 auto;

      .topcon {
        width: 100%;
        display: flex;
        .img {
          width: 35%;
          margin-right: 10px;
          img {
            width: 100%;
          }
        }
        .text {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            color: #fff;
            font-size: 18px;
            font-weight: 700;
          }
          .singer {
            font-size: 12px;
            color: #b7b7b7;
            margin-top: 10px;
          }
          .time {
            font-size: 12px;
            color: #b7b7b7;
          }
          .describe {
            display: flex;
            align-items: center;
            .van-ellipsis {
              font-size: 12px;
              color: #b7b7b7;
              width: 190px;
            }
          }
        }
      }
    }
    .ccs {
      position: absolute;
      width: 70%;
      height: 35px;
      background: #fff;
      bottom: -16px;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 50px;
      box-shadow: 0px 0px 6px #00000030;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #d3d3d3;
      .disfxd {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #333;
        .iconfont {
          margin-right: 5px;
          font-size: 12px;
        }
      }
    }
  }
  .list {
    padding: 0 8px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 80px;
    .listtop {
      width: 100%;
      margin-top: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .listleft {
        display: flex;
        align-items: center;
        .name {
          font-size: 14px;
          font-weight: 700;
          margin-left: 5px;
        }
        .num {
          font-size: 12px;
          color: #b7b7b7;
          margin-left: 3px;
        }
      }
    }
    li {
      display: flex;
      align-items: center;
      padding: 1px 0;
      .num {
        width: 18px;
        text-align: center;
        font-size: 14px;
        color: #b7b7b7;
        margin-left: 3px;
        margin-right: 9px;
      }
      .text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.5px;
        }
        .tap {
          display: flex;
          margin-top: -7px;
          span {
            font-size: 12px;
            color: rgb(119, 119, 119);
            margin-right: 5px;
            transform: scale(0.8, 0.9);
            letter-spacing: 0.3px;
          }
        }
      }
      .move {
        .iconfont {
          font-size: 14px;
          color: #b7b7b7;
        }
      }
    }
  }
  .dixf {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: auto;
  }
}
</style>